<template>
  <div>
    <Searchbar>
      <div class="tabs">
          <div @click="go('/pub/images')">内置镜像</div>
          <div @click="go('/my/images')" >自定义镜像</div>
          <div class="active-tab">虚拟机列表</div>
      </div>
      <div>
        <el-input style="margin-top: 10px;margin-right: 10px" @change="getList" class="long-input" v-model="search.image_name" placeholder="请输入镜像名称"></el-input>
        <el-button  @click="getList" type="primary">查询</el-button>
      </div>
    </Searchbar>
    <table cellspacing="0" cellpadding="0" class="obj-con-table">
      <thead>
        <tr>
          <td>序号</td>
          <td>镜像名称</td>
          <td>状态</td>
          <td>实例状态</td>
          <td>ip</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(c, i) in tableData" :key="'instance' + i">
          <td>{{(i+1)%10}}</td>
          <td>{{c.image_name}}</td>
          <td>
            {{ c.status == 'S' ? '已保存' : '待保存'}}
          </td>
          <td>
            {{ c.instance ? c.instance.InstanceState : '已回收'}}
          </td>
          <td>{{c.instance && c.instance.PublicIpAddresses ? c.instance.PublicIpAddresses[0] : '--'}}</td>
          <td>
            <div v-if="c.instance">
              <el-button v-if="c.status == 'N'" 
                type="primary" @click="onCreateImage(c)">保存为镜像</el-button>
              <el-button 
                v-if="['STOPPED'].includes(c.instance.InstanceState)" 
                type="warning" 
                @click="onInsAction(c, 'start')">开机</el-button>
              <el-button 
                v-if="['RUNNING'].includes(c.instance.InstanceState)" 
                type="warning" 
                @click="onInsAction(c, 'shutdown')">关机</el-button>
              <el-button 
                v-if="['RUNNING', 'STOPPED'].includes(c.instance.InstanceState)" 
                type="error"
                @click="onInsAction(c, 'recovery')">回收</el-button>
<!--              <a v-if="c.instance.InstanceState == 'RUNNING'" href="javascript:;" @click="goVNC(c.instance)">-->
<!--                <span class="vnc-btn el-button el-button&#45;&#45;success">登录</span>-->
<!--              </a>-->
            </div>
            <div v-else>
              <el-button 
                type="primary"
                @click="onCancel(c)">删除</el-button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <el-pagination
      background
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change=handleSizeChange
      :current-page.sync="search.page"
      :page-size="search.page_size"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import pageMixin from "@/mixins/pageMixin";
import { imageModel, insModel } from "../api/models";
import Searchbar from "@/components/Searchbar";
import openStatus from '@/common/is_open_status.js'
import goMixin from '@/mixins/goMixin.js'
import {Message} from 'element-ui'
import {WConfirm} from '@/utils/utils.js'
// import {WConfirm} from '../utils/utils'
export default {
  mixins: [pageMixin, goMixin],
  components: { Searchbar},
  data() {
    return {
      tableData: [],
      total: 0,
      is_open_status: openStatus.status,
      search: {
        image_name: null,
        page: 1,
        page_size: 10,
        get_public: 1
      },
      instances: [],
      loading: false
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      imageModel.tempInstances(this.search, res => {
        this.tableData = res.data
        console.log(this.tableData)
        this.total = res.total_records
      })
    },
    onCreateImage(row) {
      if (this.loading) return;
      WConfirm('确定保存实例为镜像？', () => {
        console.log(row)
        this.loading = true
        imageModel.create2({
          instance_id: row.id
        }, (res) => {
          Message.success(res.message)
          // setTimeout(this.getItem, 5000)
          this.loading = false
          setTimeout(this.getList,5000)
        }, err => {
          Message.warning(err.message)
          this.loading = false
        })
      }, () => {
        Message.warning('操作取消')
      })
    },
    onInsAction(row, action) {
      if (this.loading) return;
      WConfirm('确定操作该实例？', () => {
        console.log(row)
        this.loading = true
        insModel.action({
          action: action,
          insId: row.id
        }, (res) => {
          this.loading = false
          console.log('ins action', res)
          Message.success(res.message)
          setTimeout(this.getList,5000)
          setTimeout(this.getList, 20000)
        }, err => {
          this.loading = false
          // Message.warning(err.message)
        })
      }, () => {
        Message.warning('操作取消')
      })
    },
    onCancel(row) {
      if (this.loading) return;
      insModel.cancel({
        insId: row.id
      }, res => {
        Message.success(res.message)
        this.loading = false
       setTimeout(this.getList,5000)
      }, err=> {
        Message.error(err.message)
        this.loading = false
      })
      console.log(row)
    }
  }
};
</script>
<style lang="scss">
.vnc-btn {

}
</style>